<template>
    <section style="padding: 24px; background:#fff;">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <div class="table-operator">
                <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </div>
            <!-- table区域-begin -->
            <div>

                <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange">
                    <span slot="action" slot-scope="text, record">
                        <a @click="handleEdit(record)">编辑</a>
                        <a-divider type="vertical" />
                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                            <a>删除</a>
                        </a-popconfirm>

                    </span>

                </a-table>
            </div>
            <!-- table区域-end -->
        </div>
        <add-category ref="addcategory" @ok="modalFormOk"></add-category>
    </section>
</template>
<script>
import { listCategories ,deleteCategoryById} from "@/api/api";
import AddCategory from './modules/AddCategory.vue';
const columns = [
    {
        title: '分类名称',
        align: "center",
        dataIndex: 'name',
        width: 80,
    },
    {
        title: '拼音',
        align: "center",
        width: 50,
        dataIndex: 'pinyin',
    },
    {
        title: '状态',
        align: "center",
        width: 80,
        dataIndex: 'state',
        customRender(text) {
            if (text == 0) {
                return '冻结';
            } else if (text == 1) {
                return '正常';
            }
        }
    },
    {
        title: '描述',
        align: "center",
        width: 100,
        dataIndex: 'description',
        ellipsis: true,
    },
    {
        title: '创建日期',
        align: "center",
        width: 80,
        dataIndex: 'createTime',
    },
    {
        title: '更新日期',
        align: "center",
        width: 80,
        dataIndex: 'updateTime',
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: "center",
        width: 120
    }

];
export default {
    components: { AddCategory },
    data() {
        return {
            /* 数据源 */
            dataSource: [],
            columns,
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '15', '20'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            /* table加载状态 */
            loading: false,
        }
    },
    methods: {
        //获取数据
        getData(arg) {
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
             let pageNo = this.ipagination.current;
            let pageSize = this.ipagination.pageSize;
            this.loading = true;
            listCategories(pageNo,pageSize).then(res => {
                if (res.code == 200) {
                    let resData = res.data;
                    this.loading = false;
                    this.dataSource = resData.records;

                    if (resData.total) {
                        this.ipagination.total = resData.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                } else {
                    this.loading = false;
                }
            })
        },
        modalFormOk(){
            this.getData();
        },
        handleAdd() {
            this.$refs.addcategory.add();
            this.$refs.addcategory.title = "添加分类";
        },
        handleEdit(record){
            this.$refs.addcategory.edit(record);
            this.$refs.addcategory.title="编辑分类";
        },
        handleDelete(param){
            deleteCategoryById(param).then(result => {
                if (result.code === 200) {
                    this.$message.success("操作成功!");
                    this.getData();
                } else {
                    this.$message.error(result.message);
                }
            })
        },
         handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            this.ipagination = pagination;
            this.getData();
        },
    },
    mounted() {
        this.getData();
    },

}
</script>